<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>示例</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: boxanimation 3s linear infinite;
    }

    @keyframes boxanimation {
      0% {
        transform: translateX(0);
      }

      50% {
        transform: translateX(300px);
      }

      100% {
        transform: translateX(0);
      }
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <button onclick="play()">播放</button>
  <button onclick="stop()">暂停</button>
  <!-- <div class="box2"></div> -->
  <script>
    function play() {
      document.querySelector(".box").style.animationPlayState = "running"; // animationPlayState 为空时继续播放
    }
    function stop() {
      document.querySelector(".box").style.animationPlayState = "paused"; // animationPlayState 为paused时暂停
    }
  </script>
</body>

</html>